<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <link rel="stylesheet" href="text.css" /> -->
    <style>
      #box1 {
        width: 200px;
        height: 200px;
        background-color: red;
      }
    </style>
    <script>
      window.onload = function () {
        /**
         * 点击按钮，修改box1的大小
         */
        var box1 = document.getElementById("box1");
        var btn01 = document.getElementById("btn01");
        btn01.onclick = function () {
          // 修改box1的宽度
          /**
           * 同JS修改元素的样式：
           * 语法：元素.style.样式名=样式值
           * 不能有-号 去掉-号首字母大写
           *
           * 我们通过style属性设置的样式都是内联样式
           *  所以通过JS修改的样式往往会立即显示
           *
           *
           */
          box1.style.width = "300px";
          box1.style.backgroundColor = "blue";
        };

        // 点击按钮2，读取该元素的样式
        var btn02 = document.getElementById("btn02");
        btn02.onclick = function (e) {
          console.log(e);

          // 读取box1的样式
          /**
          *  语法:元素.style.样式名
          通过style属性设置和读取的都是内联样式
           无法读取样式表中的样式
          */
          alert(box1.style.width);
        };
      };
    </script>
  </head>
  <body>
    <button id="btn01">点击</button>
    <button id="btn02">点击</button>
    <div id="box1"></div>
  </body>
</html>
